<template>
  <div class="goods-model" v-loading.fullscreen.lock="loading">
    <div class="goods-model-btns" v-if="hasAdd">
      <el-button size="small" type="primary" @click="addModel">新增规格</el-button>
    </div>
    <div class="goods-model-table-div">
      <el-table fit stripe border highlight-current-row :data="goodsModelList">
        <el-table-column label="规格名称" prop="goodsModelName" column-key="goodsModelName" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="数量" prop="goodsTotal" column-key="goodsTotal" min-width="100px" align="center"></el-table-column>
        <el-table-column label="成本价" prop="goodsModelCost" column-key="goodsModelCost" min-width="100px" align="center"></el-table-column>
        <el-table-column label="渠道价" prop="goodsModelChannelPrice" column-key="goodsModelChannelPrice" min-width="100px" align="center">
        </el-table-column>
        <el-table-column label="销售价" prop="goodsModelSalePrice" column-key="goodsModelSalePrice" min-width="100px" align="center"></el-table-column>
        <el-table-column label="原价" prop="goodsModelSourcePrice" column-key="goodsModelSourcePrice" min-width="100px" align="center">
        </el-table-column>
        <el-table-column :resizable="false" column-key="status" label="状态" width="60px" align="center">
          <template slot-scope="scope">
            <span :class="'status_'+scope.row.status">{{i18n.getMsg(`goods.goodsModel.status.${scope.row.status}`)}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="hasUpdate" :resizable="false" label="操作" column-key="handle" width="140px" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateModel(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="delModel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog append-to-body :title="dialogType==='add'?'新增规格':'修改规格'" custom-class="sys-dialog" :close-on-click-modal="false"
      :visible.sync="openDialog" width="500px" top="calc(50vh - 220px)" @closed="dialogClosed">
      <div style="height:370px;overflow:auto">
        <goods-model-form v-if="openDialog" :goods-model="selectGoodsModel" :goods-form="goodsForm" :type="dialogType" :form-type="type"
          :is-update-price="isUpdatePrice" @save-model="toSaveModel" @save-success="saveSuccess">
        </goods-model-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import GoodsModelForm from './goodsModelForm';

  import GoodsApi from 'services/goodsApi';

  export default {
    props: {
      goodsForm: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        default: 'add'
      },
      isUpdatePrice: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      goodsModelList() {
        return this.goodsForm.goodsModelList;
      },

      hasReadonly() {
        return ['add', 'update'].indexOf(this.type) === -1;
      },

      hasAdd() {
        if (this.hasReadonly) {
          return false;
        }

        if (this.type === 'update') {
          if (this.goodsForm.activityTypeId !== '') {
            return false;
          }
        }
        return true;
      },

      hasUpdate() {
        if (this.isUpdatePrice && this.type === 'look') {
          return this.goodsForm.activityTypeId !== '';
        }
        if (this.hasReadonly) {
          return false;
        }
        return true;
      }
    },

    data() {
      return {
        loading: false,
        openDialog: false,
        dialogType: '',
        selectGoodsModel: null
      };
    },

    methods: {
      addModel() {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      updateModel(goodsModel) {
        this.dialogType = 'update';
        this.selectGoodsModel = goodsModel;
        this.openDialog = true;
      },

      toSaveModel(goodsModelForm, type) {
        if (type === 'add') {
          let flag = this.goodsForm.addGoodsModel(goodsModelForm);
          if (flag) {
            this.openDialog = false;
          }
        } else {
          let flag = this.goodsForm.updateGoodsModel(goodsModelForm, this.selectGoodsModel);
          if (flag) {
            this.openDialog = false;
          }
        }
      },

      saveSuccess() {
        this.openDialog = false;
        this.resetGoodsModelList();
      },

      dialogClosed() {
        this.dialogType = '';
        this.selectGoodsModel = null;
      },

      delModel(goodsModel) {
        if (this.type !== 'add') {
          let goodsModelList = this.goodsModelList;
          if (goodsModelList.length === 1) {
            this.$message('商品至少有一个规格，该商品规格不能删除');
            return;
          }
        }

        this.$confirm('是否确定删除该商品规格', '删除').then(() => {
          if (this.type === 'add') {
            this.goodsForm.delGoodsModel(goodsModel);
          } else {
            this.toDelModel(goodsModel);
          }
        }).catch(() => {});
      },

      resetGoodsModelList() {
        this.loading = true;
        GoodsApi.getGoodsModelList(this.goodsForm).then(goodsModelList => {
          this.goodsForm.resetGoodModelList(goodsModelList);
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      toDelModel(goodsModel) {
        this.loading = true;
        GoodsApi.delGoodsModel(goodsModel.id).then(() => {
          this.loading = false;
          this.$alert('商品的规格删除成功', '信息', {
            callback: () => {
              this.resetGoodsModelList();
            }
          });
        }).catch(() => {
          this.loading = false
        });
      }
    },

    components: {
      GoodsModelForm
    }
  };

</script>

<style lang="scss" scoped>
  .goods-model {
    .goods-model-btns {
      margin-bottom: 10px;
    }

    .el-button+.el-button {
      margin-left: 0;
    }

    .status_0 {
      color: #ff0000;
    }

    .status_1 {
      color: #11b95c;
    }
  }

</style>
